<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="admin/_fragments::head(~{::title})">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类管理</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../../static/css/me.css" >
    <!-- 网站图标添加 -->
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
</head>
<body style="background: none !important;">

    <!-- 页面顶端的进度条 -->
    <div class="ui pink tiny progress myprogress">
        <div class="bar mybar"></div>
    </div>

    <!-- 导航 -->
    <nav th:replace="admin/_fragments::menu(3)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" style="opacity:100%;">
        <div class="ui container">
            <!-- stackable样式是为了兼容手机端 在grid旁边找 -->
            <div class="ui inverted secondary stackable menu">
                <h2 class="ui teal header item">后台管理</h2>
                <a href="#" class="m-item item m-mobile-hide"><i class="home icon"></i> 博客</a>
                <a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i> 分类</a>
                <a href="#" class="active m-item item m-mobile-hide"><i class="tags icon"></i> 标签</a>
                <div class="right m-item item m-mobile-hide">
                    <div class="right m-item item m-mobile-hide menu">
                        <div class="ui dropdown item">
                            <div class="text">
                                <img class="ui avatar image" src="https://unsplash.it/100/100">
                                团子
                            </div>
                            <i class="dropdown icon"></i>
                            <div class="menu">
                                <a href="#" class="item">注销</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <a href="#" id="myhide" class="ui black icon button m-right-top m-mobile-show">
            <i class="sidebar icon"></i>
        </a>
    </nav>
    <div class="ui attached pointing menu">
      <div class="ui container">
        <div class="right menu">
            <a href="#" th:href="@{/admin/tags/input}" class="item">发布</a>
            <a href="#" th:href="@{/admin/tags}" class="active teal item">列表</a>
        </div>
      </div>
    </div>

    <br />
    <br />
    <br />


    <!-- 中间内容 -->
    <div class=" m-container m-padded-tb-big" >
      <div class="ui container">
        <div class="ui success message" th:unless="${#strings.isEmpty(message)}">
            <i class="close icon"></i>
            <div class="header">提示</div>
            <p th:text="${message}">恭喜，操作成功！</p>
        </div>
        <table class="ui table">
          <thead>
            <tr>
              <th></th>
              <th>名称</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr th:each="tag,myStat:${page.list}" >
              <td th:text="${myStat.count}">1</td>
              <td th:text="${tag.name}">学习springboot第一天</td>
              <td>
                <a href="#" th:href="@{/admin/tags/{id}/update(id=${tag.id})}" class="ui mini teal button">编辑</a>
                <a href="#" th:href="@{/admin/tags/{id}/delete(id=${tag.id})}" class="ui mini red button">删除</a>
              </td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <th colspan="6">
                <div class="ui mini left floated pagination menu" th:if="${page.pages}>1">
                  <a th:href="@{/admin/tags(page=${page.pageNum}-1)}" class="icon item" th:unless="${page.pageNum == page.navigateFirstPage}">上一页</a>
                  <a th:href="@{/admin/tags(page=${page.pageNum}+1)}" class="icon item" th:unless="${page.pageNum == page.navigateLastPage}">下一页</a>
                </div>
                <a href="#" th:href="@{/admin/tags/input}" class="ui green right floated mini button">新增</a>
              </th>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>

    <br />
    <br />

    <!-- 底部元素 -->
    <footer th:replace="admin/_fragments::footer" class="ui inverted vertile segment m-padded-tb-massive">
        <div class="ui center aligned container">
            <div class="ui inverted divided grid stackable">
                <div class="three wide column">
                    <div class="ui inverted link list">
                        <div class="item">
                            <img src="../../static/images/wechat.jpg" class="ui rounded image" alt="" style="width: 110px">
                        </div>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">用户故事{User Story}</a>
                        <a href="#" class="item">用户故事{User Story}</a>
                        <a href="#" class="item">用户故事{User Story}</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced">联系我们</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">Email : 3401829509@qq.com</a>
                        <a href="#" class="item">QQ : 3401829509</a>
                    </div>
                </div>
                <div class="seven wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced">Blog</h4>
                    <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客，会分享关于编程，写作，思考相关的内容，希望可以给来到这儿的人有所帮助...</p>
                </div>
            </div>
            <div class="ui inverted section divider"></div>
            <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright @ 2022-2023 Blog by tuanzi </p>
        </div>
    </footer>
    
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

<script>

    // 这里先定义一个滚动条的滚动
    $(function(){
        $(window).scroll(function(){
        var scrollTo = $(window).scrollTop(),
        docHeight = $(document).height(),
        windowHeight = $(window).height();
        scrollPercent = (scrollTo / (docHeight-windowHeight)) * 100;
        scrollPercent = scrollPercent.toFixed(1);
        console.log(scrollPercent+"% !important")
        $(".mybar").css({width:scrollPercent+"%"});
    }).trigger('scroll');
    })
    

    // 这里定义的是缩小成手机端后的点击显示导航栏方法
    $('#myhide').click(function(){
        $('.m-item').toggleClass('m-mobile-hide');
    })

    // 初始化下拉组件
    $('.ui.dropdown').dropdown({
      on : "hover"
    });

    //关闭消息提示
    $('.message .close').on('click',function (){
        $(this).closest('.message').transition('fade');
    })

</script>

</body>
</html>